@Entry
@Component
struct HomeworkPage1 {
  videoController: VideoController = new VideoController()
  // 播放状态
  @State isPlay: boolean = false
  // 总时长
  @State totalTime: number = 0
  // 播放进度
  @State curTime: number = 0
  // 是否静音
  @State isMute: boolean = false
  // 倍速下标
  @State stepIndex: number = 1
  // 倍速集合
  @State curstep: string[] = ['0.75', '1.00', '1.25', '1.75', '2.00']
  @State stepArr: string[] =
    ["Speed_Forward_0_75_X",
      "Speed_Forward_1_00_X",
      "Speed_Forward_1_25_X",
      "Speed_Forward_1_75_X",
      "Speed_Forward_2_00_X"]
  @State isFullScreen: boolean = false

  numToTime(seconds: number): string {
    let min: number = Math.floor(seconds / 60);
    let sec: number = Math.floor(seconds % 60);

    return (min < 10 ? '0' + min : min + '') + ":" + (sec < 10 ? '0' + sec : sec + '')
  }

  build() {
    Column() {
      Video({
        src: $r("app.media.01"),
        previewUri: $r("app.media.nezha"),
        controller: this.videoController,
        currentProgressRate: PlaybackSpeed[this.stepArr[this.stepIndex]]
      })
        .width("100%")
        .height(500)
        .controls(this.isFullScreen)
        .objectFit(ImageFit.Contain)
        .muted(this.isMute)
        .onPrepared((event) => {
          this.totalTime = event.duration
        })
        .onUpdate((event) => {
          this.curTime = event.time
        })
        .onFinish(() => {
          this.isPlay = false
        })
        .onFullscreenChange((event) => {
          this.isFullScreen = event.fullscreen
        })

      Row({ space: 5 }) {
        Image(this.isPlay ? $r("app.media.pause") : $r("app.media.play"))
          .width(20)
          .height(20)
          .onClick(() => {
            this.isPlay = !this.isPlay
            this.isPlay ? this.videoController.start() : this.videoController.pause()
          })
        Text(this.numToTime(this.curTime))
        Slider({
          value: $$this.curTime,
          max: this.totalTime
        }).layoutWeight(1)
          .onChange((value: number, mode: SliderChangeMode) => {
            // 修改播放进度
            this.videoController.setCurrentTime(value)
          })
        Text(this.numToTime(this.totalTime))
        Button(`X${this.curstep[this.stepIndex]}`)
          .fontColor(Color.Black)
          .type(ButtonType.Normal)
          .backgroundColor(Color.White)
          .onClick(() => {
            this.stepIndex = (this.stepIndex + 1) % 5;
            console.log(this.stepIndex + "")
          })
        Image(this.isMute ? $r("app.media.muted") : $r("app.media.voice"))
          .width(20)
          .height(20)
          .onClick(() => {
            this.isMute = !this.isMute
          })
        Image($r("app.media.fullscreen")).width(20).height(20).onClick(() => {
          this.isFullScreen = !this.isFullScreen
          if (this.isFullScreen) {
            this.videoController.requestFullscreen(true)
          } else {
            this.videoController.exitFullscreen()
          }
        })

      }
      .width("100%")
      .height(50)
      .padding({ left: 5, right: 5 })
      .backgroundColor(Color.White)

    }
    .height('100%')
    .width('100%')

  }
}

import { LengthMetrics } from '@kit.ArkUI';


@Entry
@Component
struct HomeworkPage2 {
  @State message: string = 'Hello World';
  @State arr: string[] =
    ["WiFi电话卡", "保险·签证", "外币兑换", "购物", "当地向导", "自由行", "境外玩乐", "礼品卡", "信用卡", "更多"]

  build() {
    Column() {
      Text("Flex布局")
      Flex({ wrap: FlexWrap.Wrap, space: { main: LengthMetrics.vp(0), cross: LengthMetrics.vp(20) } }) {
        ForEach(this.arr, (item: string) => {
          Column() {
            Image($r("app.media.startIcon")).width(30).height(30)
            Text(item).fontSize(12).margin({ top: 5 })
          }.width("20%")
        })
      }

      Text("Grid布局")
      Grid() {
        ForEach(this.arr, (item: string) => {
          GridItem() {
            Column() {
              Image($r("app.media.startIcon")).width(30).height(30)
              Text(item).fontSize(12).margin({ top: 5 })
            }
          }
        })
      }
      .height(150)
      .columnsTemplate('repeat(5, 1fr)')
      .columnsGap(10)
      .rowsGap(10)

      Text("List布局")
      List({ space: 10 }) {
        ForEach(this.arr, (item: string) => {
          ListItem() {
            Column() {
              Image($r("app.media.startIcon")).width(30).height(30)
              Text(item).fontSize(12).margin({ top: 5 })
            }.width("100%")
          }
        })
      }.lanes(5)
    }
    .height('100%')
    .width('100%')
  }
}